<template>
  <!-- 住户详情 -->
  <div class="ResidentLabels">
    <div class="ResidentLabels-tittle">
      <div class="crumbs">
        <p>
          <span>资料管理 /</span> <span> 住户管理 /</span><span> 审核住户</span>
        </p>
        <h3>住户详情</h3>
      </div>
    </div>
    <div class="ResidentLabels-content">
      <div class="content-title">
        <p>审核流程</p>
        <div class="title-btn">
          <div class="demo-progress">
            <el-steps
              :active="2"
              finish-status="success"
              simple
              style="margin-top: 20px"
            >
              <el-step title="提交住户信息" description="1" />
              <el-step title="物业审核" />
              <el-step title="认证通过" />
            </el-steps>
          </div>
        </div>
      </div>
    </div>

    <!-- 描述列表 -->
    <div class="ResidentLabels-content">
      <div class="content-title">
        <el-descriptions  title="基础资料">
          <el-descriptions-item label="用户姓名">{{
            data.name
          }}</el-descriptions-item>
          <el-descriptions-item label="住户编号">{{
            data.serialNo
          }}</el-descriptions-item>
          <el-descriptions-item label="手机号码">{{
            data.phoneNumber
          }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{
            data.sex
          }}</el-descriptions-item>
          <el-descriptions-item label="证件类型">{{
            data.certificateType
          }}</el-descriptions-item>
          <el-descriptions-item label="身份证号">{{
            data.identificationNumber
          }}</el-descriptions-item>
          <el-descriptions-item label="住户类型">{{
            data.type
          }}</el-descriptions-item>
          <el-descriptions-item label="备注">无</el-descriptions-item>
          <el-descriptions-item label="住户来源">{{
            data.houseState
          }}</el-descriptions-item>
          <el-descriptions-item label="提交审核时间">{{
            data.ptime
          }}</el-descriptions-item>
          <el-descriptions-item label="注册时间">{{
            data.ptime
          }}</el-descriptions-item>
          <el-descriptions-item label=""></el-descriptions-item>
          <el-descriptions-item label="身份证正面照"
            ><div class="demo-image">
              <div v-for="fit in fits" :key="fit" class="block">
                <span class="demonstration"></span>
                <el-image
                  style="width: 100px; height: 100px"
                  :src="url"
                  :fit="fit"
                />
              </div></div
          ></el-descriptions-item>
          <el-descriptions-item label="身份证背面照"
            ><div class="demo-image">
              <div v-for="fit in fits" :key="fit" class="block">
                <span class="demonstration"></span>
                <el-image
                  style="width: 100px; height: 100px"
                  :src="url"
                  :fit="fit"
                />
              </div></div
          ></el-descriptions-item>
        </el-descriptions>
      </div>
      <!-- 页码 -->
      <!-- <div class="pages">
        <Page
          :count="count"
          :total="total"
          :currentPage="page"
          @handleCurrentChange="handleCurrentChange"
          @handleSizeChange="handleSizeChange"
        ></Page>
      </div> -->
    </div>
    <div class="ResidentLabels-content">
      <div class="content-title">
        <p>审核意见</p>
        <el-input
          v-model="textarea"
          :rows="2"
          type="textarea"
          placeholder="请输入"
          class="texts"
        />
        <el-row class="mb-4">
          <el-button type="primary">审核通过</el-button>
          <el-button type="danger">审核不通过</el-button>
          <el-button @click="back">返回</el-button>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import axios from "../../utils/http";
import { ref, reactive, onMounted } from "vue";
import router from "../../router";
import Page from "../../components/Page.vue";
import { ElMessage } from "element-plus";
import timeTrans from "../../utils/time";
import {
  Star,
  Search,
  Message,
  Delete,
  Check,
  Edit,
  Picture,
  UploadFilled,
} from "@element-plus/icons-vue";
import { log } from "console";

const input = ref("");
// let tableData = ref([]);
const fits = ["fill"];
const url =
  "https://tupian.qqw21.com/article/UploadPic/2020-7/2020791951792930.jpg";

const cellStyle = ref({
  height: "60px",
  fontSize: "15px",
});
const headerStyle = ref({
  height: "60px",
  fontSize: "15px",
  color: "black",
});

let data = ref({
    name:'张三',
    serialNo:'11',
    sex:'女',
    type:'业主',
    houseState:'自主',
    ptime:'2022-11-18',
    certificateType:'身份证',
    identificationNumber:'546546546646464',
    phoneNumber:'18536984562',
})

let page = ref(1);
let count = ref(5);
let total = ref(20);
let ids = ref();

let getdata = () => {
  axios({
    url: "/householdManagement/list",
    method: "get",
    params: {
        name:ids.value,
      page: page.value,
      limit: count.value,
      labelName: input.value,
    },
  }).then(({ data }) => {
    if (data.code == 0) {
      data.value = data.data.list;
      total.value = data.total;
    }
  });
};

let back = () => {
  router.push("/home/HouseholdManagement");
};

// let handleCurrentChange = (val) => {
//   console.log(val);
//   page.value = val;
//   getdata();
// };
// let handleSizeChange = (val) => {
//   console.log(val);
//   count.value = val;
//   getdata();
// };
onMounted(() => {
  
  ids.value = router.currentRoute.value.query.name;
  console.log(ids.value);
  getdata();
});
// 编辑
// let dialogVisible = ref(false);
// let editId = ref(0);
// let editInput = ref("");
// let edit = (e) => {
//   dialogVisible.value = true;
//   editId.value = e.id;
//   editInput.value = e.labelName;
// };

// 弹窗：
// 编辑确认
// let editEnsure = () => {
//   dialogVisible.value = false;
//   axios({
//     url: "/houseLabel/update",
//     method: "put",
//     data: {
//       id: editId.value,
//       labelName: editInput.value,
//     },
//   }).then(({ data }) => {
//     if (data.code == 0) {
//       ElMessage({
//         message: "编辑成功",
//         type: "success",
//       });
//       getdata();
//     }
//   });
// };

// 删除
// let del = (e) => {
//   axios({
//     url: "/houseLabel/delete",
//     method: "DELETE",
//     data: {
//       ids: [e],
//     },
//   }).then(({ data }) => {
//     console.log(data);
//     if (data.code == 0) {
//       ElMessage({
//         message: "删除成功",
//         type: "success",
//       });
//       getdata();
//     }
//   });
// };

// 新建
// let addLabel = ref(false);
// let addInput = ref("");
// let addFn = () => {
//   addLabel.value = true;
// };
// let addEnsure = () => {
//   addLabel.value = false;
//   let nowDate = Date.now();
//   let getTime = timeTrans(nowDate);
//   let userId = sessionStorage.getItem("id");
//   axios({
//     url: "/houseLabel/add",
//     method: "post",
//     data: {
//       addPersonId: userId,
//       addTime: getTime,
//       labelName: addInput.value,
//     },
//   }).then(({ data }) => {
//     if (data.code == 0) {
//       getdata();
//     }
//   });
// };

// 批量删除
// let bulkDel = () => {
//   axios({
//     url: "/houseLabel/delete",
//     method: "DELETE",
//     data: {
//       ids: multipleSelection.value,
//     },
//   }).then(({ data }) => {
//     if (data.code == 0) {
//       ElMessage({
//         message: "删除成功",
//         type: "success",
//       });
//       getdata();
//     } else {
//       ElMessage.error("删除失败");
//     }
//   });
// };
// const multipleSelection = ref<number[]>([]);
// 多选框变得方法
// const selectionChange = (val) => {
//   multipleSelection.value = [];
//   val.forEach((v) => {
//     multipleSelection.value.push(v.id);
//   });
//   console.log(multipleSelection.value);
//   // console.log(typeof multipleSelection.value)
// };

// 查询
// const searchFn = () => {
//   console.log("查询");
//   getdata();
// };

// 重置
// const resetFn = () => {
//   console.log("重置");
//   input.value = "";
//   getdata();
// };
</script>

<style lang="less" scoped>
.ResidentLabels {
  width: 90%;
  margin: auto;
  // border: 1px solid red;
  .ResidentLabels-tittle {
    // border: 1px solid red;
    background-color: white;
    margin-top: 20px;
    .crumbs {
      padding: 15px 20px;
      font-size: 16px;
      border-bottom: 1px solid #ccc;
      p {
        margin-bottom: 10px;
        span:nth-child(1) {
          color: #8d8d8d;
        }
        span:last-child {
          color: #000;
        }
      }
    }
    .search {
      padding: 15px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .search-left {
        span {
          font-size: 16px;
        }
        .el-input {
          margin-left: 15px;
          width: 250px;
        }
      }
    }
  }
  .ResidentLabels-content {
    padding: 15px 20px;
    // border: 1px solid red;
    margin-top: 20px;
    background-color: white;
    .content-title {
      //   border: 1px solid red;
      p {
        float: left;
        // border: 1px solid red;
      }
      .title-btn {
        width: 100%;
        // border: 1px solid red;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .demo-progress {
          width: 80%;
          // border: 1px solid red;
        }
      }
      .texts {
        margin-top: 10px;
      }
      .mb-4 {
        margin-top: 10px;
      }
    }
    .pages {
      margin-top: 30px;
      display: flex;
      justify-content: flex-end;
    }
  }
  .el-dialog {
    .tanchu-body {
      display: flex;
      input {
        flex: 1;
      }
    }
  }
}
</style>
